<template>
	<div class="edit-book">
		<div class="title">
			<el-icon><ArrowLeftBold /></el-icon>
			<h2>章节排序</h2>
			<div class="seat"></div>
		</div>
		<div class="content">
			<div class="sort-box">
				<div class="module">
					<h4>未命名分集</h4>
					<div
						class="sort-inner"
						v-sortable="{
							animation: 150,
							onEnd: handleOnEnd,
							ghostClass: 'sortable-ghost',
						}"
					>
						<div class="sort-item" v-for="item in sortList1" :key="item.id">
							<h3>{{ item.name }}</h3>
							<el-icon><Finished /></el-icon>
						</div>
					</div>
				</div>
				<div class="module">
					<h4>你好</h4>
					<div
						class="sort-inner"
						v-sortable="{ animation: 150, onEnd: handleOnEnd }"
					>
						<div class="sort-item" v-for="item in sortList2" :key="item.id">
							<h3>{{ item.name }}</h3>
							<el-icon><Finished /></el-icon>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	ArrowLeftBold,
	Setting,
	EditPen,
	ArrowDown,
	Sort,
	MoreFilled,
	View,
	Tickets,
	Finished,
} from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
const dialogFormVisible = ref(false);
const dialogFormVisible2 = ref(false);

const options = [
	{
		value: "Option1",
		label: "Option1",
	},
	{
		value: "Option2",
		label: "Option2",
	},
	{
		value: "Option3",
		label: "Option3",
	},
	{
		value: "Option4",
		label: "Option4",
	},
	{
		value: "Option5",
		label: "Option5",
	},
];

const sortList1 = ref([
	{
		id: 1,
		name: "未命名章节1",
	},
	{
		id: 2,
		name: "未命名章节2",
	},
]);

const sortList2 = ref([
	{
		id: 1,
		name: "1111",
	},
	{
		id: 2,
		name: "2222",
	},
]);

const handleOnEnd = (event) => {
	console.log(event);
	const movedItem = sortList1.value.splice(event.oldIndex, 1)[0];
	sortList1.value.splice(event.newIndex, 0, movedItem);
};
</script>

<style lang="scss" scoped>
.edit-book {
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 1rem;
		padding-right: 1rem;
		gap: 0.5rem;
		height: 4rem;
		background: #fff;
		.seat {
			width: 3rem;
			height: 100%;
			flex: 0 0 auto;
		}
	}
	.content {
		.sort-box {
			margin: 0 auto;
			width: 100%;
			max-width: 32rem;
			padding-left: 1rem;
			padding-right: 1rem;
			display: flex;
			flex-flow: column;
			gap: 2rem;
			.module {
				h4 {
					font-size: 1rem;
					font-weight: 400;
					line-height: 4rem;
					letter-spacing: 0.05em;
					color: #1a202c;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					height: 4rem;
				}
				.sort-inner {
					display: flex;
					flex-direction: column;
					gap: 1rem;
					.sort-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-left: 1rem;
						height: 3.25rem;
						background-color: #edf2f7;
						border-radius: 0.25rem;
						h3 {
							font-size: 0.875rem;
							font-weight: 400;
							line-height: 2;
							letter-spacing: 0.05em;
							color: #2d3748;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
						:deep(.el-icon) {
							width: 3rem;
						}
					}
				}
			}
		}
	}
}

.sortable-ghost {
	opacity: 0.5;
	background-color: #e6e6e6;
}
</style>